/* 
1 发送请求获取数据 页面渲染
2 使用 虚拟列表组件来完成页面渲染 
  1 先把大概布局做好 
3 List 分页
  1 先找到分页事件 onscroll  最长列表-后两个 值得拥有!!! 
  2 确定还有没有下一页
    1 拿当前的条数/页码  和 总的条数/页码 
    2 开始条数  结束 增加
    3 数据回来 
  3 节流 
  5 数据拼接-追加 


 */
import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import CitySearch from "../../components/CitySearch";
import indexCss from "./index.module.scss";
import Filter from "./Filter";
import { request as axios, baseURL } from "../../utils/request";
import { connect } from "react-redux";
import { List } from "react-virtualized";

class Index extends Component {

  state = {
    list: []
  }

  // 请求参数对象
  params = {
    // 开始的条数
    start: 1,
    // 结束的条数
    end: 40,
    // 城市的id
    cityId: -1
  }
  // 用户筛选条件
  filterParams={}

  // 数据的总条数
  count = 0
  // 节流阀
  isLoadding = false;

  async componentDidMount() {
    const res1 = await axios.get("/area/info", { params: { name: this.props.cityName } });
    const id = res1.data.body.value;
    this.params.cityId = id;
    this.getList();
  }

  getList = async () => {
    // 把筛选条件和 分页条件合并成一个对象!! 
    const res = await axios.get("/houses", { params: {...this.params,...this.filterParams} });
    // console.log( res.data.body.list);
    // 赋值总条数
    this.count = res.data.body.count;
    this.setState({ list: [...this.state.list, ...res.data.body.list] });// 分页 拼接
    return Promise.resolve();
  }


  // 接收子组件筛选过后的参数 对象
  filterChange = (filterParams) => {
    // console.log(filterParams);
    this.filterParams=filterParams;
    // 重新发送请求
    // 0 先执行几次分页 start=100
    // 1 当用户点击筛选条件之后   
    // 1.1 清空旧的数据 
    // 1.2 重置页码!!! 
    this.setState({ list:[]  });
    this.params.start=1;
    this.params.end=40;
    this.getList();
  }

  rowRenderer = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {
    const { list } = this.state;
    const item = list[index];
    return (
      <div key={key} style={style} className={indexCss.house_item} >
        <div className={indexCss.house_item_img}>
          <img src={baseURL + item.houseImg} alt="" />
        </div>
        <div className={indexCss.house_item_info}>
          <div className={indexCss.house_item_title}>{item.title}</div>
          <div className={indexCss.house_item_desc}>{item.descc}</div>
          <div className={indexCss.house_item_tags}>{item.tags.join(" ")}</div>
          <div className={indexCss.house_item_price}><span>{item.price} 元/月</span></div>
        </div>
      </div>
    );
  }

  // List列表的滚动事件
  onScroll = async ({ clientHeight, scrollHeight, scrollTop }) => {
    // scrollHeight 长列表的高度
    // clientHeight 滚动容器的高度
    // scrollTop  滚动了的高度
    // 拿最长的高度 - 两个 
    // console.log("onScroll");

    // onScroll 会在页面还没有高度的时候先触发一次 根据数组的长度来控制
    const isFirst = this.state.list.length === 0;
    // 判断 有没有下一页
    const hasMore = this.params.start < this.count;

    // 判断是否触底了
    const isReachBottom = scrollHeight - clientHeight - scrollTop < 15;

    if (isFirst || !hasMore || !isReachBottom || this.isLoadding) {
      // 如果是第一次触发onscroll 就返回
      // 如果是没有下一页 !hasMore 数据了也返回 
      // 如果没有触底 !isReachBottom 就返回
      // 如果有人正在发送请求 那么就返回
      return;
    }
    this.isLoadding = true;
    // 当前条数处理
    this.params.start += 40;
    this.params.end += 40;
    await this.getList();
    this.isLoadding = false;
  }

  render() {
    const { list } = this.state;
    return (
      <div>
        <div className={indexCss.found_nav}>
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={this.props.history.goBack}
          >列表找房</NavBar>
          <div className={indexCss.city_search}>
            <CitySearch iconcolor="green" ></CitySearch>
          </div>
        </div>
        {/* 筛选组件 */}
        <Filter filterChange={this.filterChange} />
        {/* 列表 */}
        <div className={indexCss.found_list}>
          <List
            width={window.innerWidth}
            height={window.innerHeight - 135}
            rowCount={list.length}
            rowHeight={150}
            rowRenderer={this.rowRenderer}
            onScroll={this.onScroll}
          />
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  cityName: state.cityReducer.cityName
})



export default connect(mapStateToProps)(Index);